<template>
	<view class="container">
		<!--header-->
		<!-- <view class="tui-header bg-set-new">
			<view class="tui-category" hover-class="opcity" :hover-stay-time="150" @tap="catalog">
				<tui-icon name="manage-fill" color="#fff" :size="44" unit="rpx"></tui-icon>
				<view class="tui-category-scale"></view>
			</view>
			<view class="tui-rolling-search">
				<tui-icon name="search-2" :size="32" unit="rpx"></tui-icon>
				<swiper v-if="hotKeyword.length > 0" vertical autoplay circular interval="8000" class="tui-swiper">
					<swiper-item v-for="(item, index) in hotKeyword" :key="index" class="tui-swiper-item"
						@tap="search('', item.KEYWORD)">
						<view class="tui-hot-item">{{ item.KEYWORD }}</view>
					</swiper-item>
				</swiper>
				<swiper v-else class="tui-swiper">
					<swiper-item class="tui-swiper-item" @tap="search()">
						<view class="tui-hot-item"></view>
					</swiper-item>
				</swiper>
			</view>
		</view> -->
		<!--header-->
		<view class="tui-header-banner" :style="{ height: bannerHieght + 'rpx'}">
			<view class="tui-hot-search" v-if="hotKeyword.length > 0">
				<!-- <view>热搜</view> -->
				<view class="tui-hot-tag" v-for="(item, index) in hotKeyword" :key="index"
					@tap="search(item.SCHEME_URL, item.KEYWORD)">{{ item.KEYWORD }}</view>
			</view>
			<!-- 轮播楼层 -->
			<view class="tui-banner-bg" v-if="banner.length > 0">
				<view class="tui-primary-bg tui-route-left"></view>
				<view class="tui-primary-bg tui-route-right"></view>
				<view class="tui-banner-box">
					<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150"
						class="tui-banner-swiper" :circular="true" indicator-color="rgba(255, 255, 255, 0.8)"
						indicator-active-color="#fff">
						<swiper-item v-for="(item, index) in banner" :key="index">
							<image v-if="item.mediaType==1" :src="item.imageUrl" class="tui-slide-image"
								mode="scaleToFill" @tap.stop="toLink" :data-url="item.link" />
							<image v-if="item.mediaType===0||item.mediaType===2" :src="item.imageUrl"
								background-size="cover" :data-img="item.imageUrl" @tap.stop="previewImg"
								class="tui-slide-image" mode="scaleToFill" />

							<!-- IOS APP下视频导致页面卡顿，问题暂未找到，先隐藏 -->
							<!-- #ifndef APP-PLUS-->
							<video v-if="item.mediaType===3" class="tui-slide-image" :title="item.title"
								:src="item.videoUrl" page-gesture show-fullscreen-btn enable-play-gesture show-mute-btn
								show-screen-lock-button vslide-gesture play-btn-position="bottom" objectFit="contain" />
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<image v-if="item.mediaType===3" :src="item.imageUrl" background-size="cover"
								:data-img="item.imageUrl" @tap.stop="previewImg" class="tui-slide-image"
								mode="scaleToFill" />
							<!-- #endif -->
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<!-- 通知楼层 -->
		<view class="tui-product-box tui-bg-white"  @tap="modal=true" style="padding-bottom: 0rpx;">
			<view class='tui-notice-board'>
				<view class="tui-icon-bg">
					<tui-icon tui-icon-class="tui-rolling-icon" name="news-fill" :size='24'></tui-icon>
				</view>
				<view class="tui-scorll-view">
					<view class="tui-notice tui-animation">{{notice[0].title}}</view>
				</view>
			</view>
		</view>
		
		<!--uni-app-->
		<tui-grid>
			<block v-for="(item,index) in dataList" :key="index">
				<tui-grid-item :cell="2"  @tap="homeClick(item)">
					<view class="tui-grid-icon">
						<tui-icon :name="item.icon" :size="item.size"></tui-icon>
					</view>
					<text class="tui-grid-label">{{item.name}}</text>
				</tui-grid-item>
			</block>
		</tui-grid>
		
		<!-- #ifdef MP-WEIXIN -->
		<tui-scroll-top :bottom="20" :scrollTop="scrollTop"></tui-scroll-top>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<tui-scroll-top :scrollTop="scrollTop"></tui-scroll-top>
		<tui-fab :width="80" :height="80" :right="30" :bottom="200" icon="share" @click="onShare"></tui-fab>
		<!-- #endif -->
		<!-- <tui-nomore bgcolor="#fff" visible></tui-nomore> -->
		<view class="message-box-wrapper" v-if="luckdrawVisit">
			<view class="message-box">
				<Luckdraw></Luckdraw>
				<tui-button @click="luckdrawVisit=false" type="white" link plain>x</tui-button>
			</view>
		</view>
		<tui-modal :show="modal" maskClosable custom :zIndex="9999" width="90%" @cancel="modal=false">
			<view v-if="notice.length>0">
				<view class="notice-title">公告</view>
				<uParse :content="notice[0].content" noData=" " />
			</view>
		</tui-modal>
		
		<!-- <view class="btn tx-14" @click="getLocation2" style="background-color: aqua;padding: 10px;">位置授权</view>
		<view class="btn tx-14" @click="getAddresss" style="background-color:red;padding: 10px;margin-top: 10px;">暂 停</view> -->
	</view>
</template>
<script>
	import Luckdraw from '../luckdraw/luckdraw';
	import popAct from '@/pagesA/components/pop-act.vue'
	const util = require("@/utils/util.js");
	const app = getApp();
	import uParse from '@/components/uni/u-parse/u-parse.vue';
	import SubTabs from '@/components/sbutabs/sbutabs.vue'

	export default {
		data() {
			return {
				modal: false,
				luckdrawVisit: false,
				latitude: '',
				longitude: '',
				notice: [],
				hotKeyword: [],
				banner: [],
				bannerHieght: 0,
				category: [],
				categoryOne: {},
				wxOfficial: [],
				topics: [],
				brand: [],
				newProduct: [],
				productList: [], //热点-普通-产品列表
				groupList: [],
				seckillGoods: [{
					text: ''
				}],
				tmplIds: [],
				scrollTop: 0,
				limit: 10,
				userId: '',
				tabs: [],
				active3: 0,
				tabIndex: 0, // 当前tab的下标
				total: 0, //总页数 热点
				categoryList: [],
				pages: 1, // 热点-页数
				current: 1, // 热点-当前页码
				mobileConfig: '2',
				dataList: [{
					name: "维修接单",
					icon: "tool",
					size: 30
				},
				// {
				// 	name: "待处理工单",
				// 	icon: "setup-fill",
				// 	size: 30
				// }
				{
					name: "工单处理",
					icon: "setup-fill",
					size: 30
				},
				{
					name: "设备班组",
					icon: "strategy",
					size: 30
				},
				{
					name: "工程部工单",
					icon: "order",
					size: 30
				},{
					name: "新建工单",
					icon: "people",
					size: 30
				},{
					name: "我的信息",
					icon: "people",
					size: 30
				}]
			};
		},

		components: {
			popAct,
			uParse,
			Luckdraw,
			SubTabs
		},
		methods: {
			
			getAddresss(){
				uni.stopLocationUpdate({
					success: res => console.log('开启应用接收位置消息成功'),
					fail: err => console.error('开启应用接收位置消息失败：', err),
					complete: msg => console.log('调用开启应用接收位置消息 API 完成')
				});
				
				//uni.stopLocationUpdate({ success: (res) => { }, fail: (error) => { } });
				//uni.offLocationChange();
			},
			
			// 获取当前位置
			getLocation2(id) {
				const _this = this;
				uni.startLocationUpdateBackground({
					type: 'gcj02',
					success: (res) => {
						uni.onLocationChange((data) => {
							//获取当前时间
							var currentTime = new Date().getTime();
							//获取上次执行的时间
							var oldTime = uni.getStorageSync('oldTime');
							//判断当前间隔时间超过5s
							if (currentTime - oldTime > 5000) {
								console.log(data, '123456')
								//缓存当前执行的时间
								uni.setStorageSync('oldTime', currentTime);
								console.log("================================");
								console.log(data.latitude);
								console.log(data.longitude);
								uni.showToast({
									title: "latitude =" + data.latitude+" longitude = "+data.longitude,
									icon: 'none',
								})
								// _this.coordinates.latitude = data.latitude // 当前位置纬度
								// _this.coordinates.longitude = data.longitude // 当前位置经度
								// addTrajectory(_this.coordinates) // 把经纬度传给后端
							}
						});
					},
					fail: error => {
						console.log(error)
						uni.showToast({
							title: '无法获取位置信息！无法使用位置功能',
							icon: 'none',
						})
					}
				});
			},
			
			getAddres(){
				uni.startLocationUpdateBackground({
					success: (res) => {
					  uni.onLocationChange((res) => {
						console.log("纬度：" + res.latitude);
						console.log("经度：" + res.longitude);
					  });
					},
					fail: (err) => console.error("后台运行定位消息失败：", err),
					complete: (msg) => console.log("后台运行定位消息 API 完成"),
				});
			},
			
			onShare1() {
				//#ifdef APP-PLUS
				let that = this
				plus.share.getServices(function(s) {
					var shares = {};
					for (var i = 0; i < s.length; i++) {
						var t = s[i];
						shares[t.id] = t;
					}
					let sweixin = shares['weixin']
					if (!sweixin) {
						plus.nativeUI.alert('当前环境不支持微信分享操作!');
					} else {
						// 发送分享
						uni.share({
							provider: 'weixin',
							scene: "WXSceneSession",
							type: 5,
							imageUrl: 'https://jxstzy-shop.obs.cn-north-4.myhuaweicloud.com/20230801/2ec42b11916c4585a2a451a16c3f0fab.png',
							title: '美好购物从这里开始',
							miniProgram: {
								id: util.maAppId,
								path: 'pages/index/index',
								type: 0,
								webUrl: 'https://shop.jxshtzy.com'
							},
							success: ret => {
								console.log(JSON.stringify(ret));
							}
						});
					}
				}, function(e) {
					console.log("获取分享服务列表失败：" + e.message);
				});
				//#endif
			},
			
			searchEvent(val) {
				console.log('查询事件参数', val)
				// 此处把新的请求值 赋值给options
				if (!val) {
					this.userList();
				} else {
					let newroom = this.options.filter(item => {
						console.log(item.label)
						return item.label.toLowerCase().includes(val.toLowerCase());
					})
					this.options = newroom;
				}
			},
			
			homeClick:function(item){
				let name = item.name
				let userInfo = uni.getStorageSync('userInfo');
				
				if(userInfo == null || userInfo === ''){
					uni.showModal({
						title: '',
						content: '登录后才能使用此功能？',
						success: function(res) {
							if (res.confirm) {
								console.log("绑定。。。。。。。。。。。。。。。");
								uni.navigateTo({
									// url: '/pages/auth/login/login'
									url: '/pages/auth/btnAuth/btnAuth'
								})
							}else if(res.cancel){
								console.log("取消。。。。。。。。。。。。。。。");
							}
						}
					});
				}else {
					let phonenumber = userInfo.phonenumber;
					if(phonenumber ==null || phonenumber ===''){
						uni.showModal({
							title: '',
							content: '手机号不能为空是否绑定？',
							success: function(res) {
								if (res.confirm) {
									console.log("绑定。。。。。。。。。。。。。。。");
									uni.navigateTo({
										url: '/pages/auth/register/register'
									})
								}else if(res.cancel){
									console.log("取消。。。。。。。。。。。。。。。");
								}
							}
						});
					}else {
						if(name =='维修接单'){
							uni.navigateTo({
								url: '/pages/repair/repair',
							})
						}else if(name =='工单处理'){
							uni.navigateTo({
								url: '/pages/repair/myRepair',
							})
						}else if(name =='工程部工单'){
							uni.navigateTo({
								url: '/pages/repair/gcRepair',
							})
						}else if(name =='综合维修中心'){
							uni.navigateTo({
								url: '/pages/repair/sbRepair',
							})
						}else if (name == '我的信息') {
							this.goLogin();
						}else if (name == '设备班组') {
							uni.navigateTo({
								url: '/pages/repair/sbRepair',
							})
						}else if (name == '新建工单') {
							uni.navigateTo({
								url: '/pages/repair/newRepair',
							})
						}
					}
				}
			},
			goLogin() {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/ucenter/set/set'
					})
				} else {
					uni.navigateTo({
						url: '/pages/auth/btnAuth/btnAuth',
					})
				}
			},
			getIndexData: function() {
				uni.setStorageSync("navUrl", "/pages/index/index");
				let that = this
	
				util.request('index/bannerList').then(function(res) {
					if (res.code === 0) {
						that.banner = res.data
						if (that.banner.length > 0) {
							that.bannerHieght = 420;
							// #ifdef H5
							that.bannerHieght = 620;
							// #endif
						}
					}
				});
				util.request('index/bulletinList').then(function(res) {
					if (res.code === 0 && res.data.length > 0) {
						that.notice = res.data
					}
				});
			},
			toLink: function(e) {
				let channel = e.currentTarget.dataset.key;
				if (channel == "山地旅游") {
					uni.navigateTo({
						url: '/pages/index/scenic'
					});
				} else {
					uni.navigateTo({
						url: e.currentTarget.dataset.url
					});
				}
			},
			toChannel: function(item) {
				let url = item.url
				if (url.indexOf('?') > -1) {
					url = url + ('&title=' + item.name)
				} else {
					url = url + ('?title=' + item.name)
				}
				uni.navigateTo({
					url: url
				});
			},
			//放大预览轮播图片
			previewImg: function(e) {
				let curImg = e.currentTarget.dataset.img;
				let banner = this.banner;
				if (!util.isEmpty(curImg) && banner.length > 0) {
					let imgsArr = [];
					for (let i = 0; i < banner.length; i++) {
						imgsArr[i] = banner[i].imageUrl;
					}
					uni.previewImage({
						current: curImg, // 当前显示图片的http链接
						urls: imgsArr, // 需要预览的图片http链接列表
					})
				}
			},
			openCall: function(e) {
				uni.makePhoneCall({
					phoneNumber: e.target.dataset.phone
				})
			},
			catalog: function() {
				// uni.reLaunch({
				// 	url: '../catalog/catalog'
				// });
			},
			goCategory: function(id, pId) {
				uni.navigateTo({
					url: '/pages/category/category?type=IS_NEW'
				})
			},
			search: function(url, keyword) {
				// if (url) {
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/category/category?keyword=' + keyword
				// 	});
				// }
			},
			group(id) {
				uni.navigateTo({
					url: '/pages/groupDetail/groupDetail?id=' + id
				});
			},
			
			/**
			 * 根据分类显示产品
			 */
			getIsCategoryList() {
				let that = this;
				let categoryObj = that.categoryList[that.tabIndex];
				util.request('goods/isCategoryList', {
					categoryId: categoryObj.id,
					limit: that.limit,
					current: that.current
				}).then(function(res) {
					if (res.code === 0) {
						that.pages = res.data.pages;
						that.productList = that.productList.concat(res.data.records)
					}
				});
			},
			//切换tab，逻辑请自行处理
			change(e) {
				let that = this;
				this.tabIndex = e.index
				this.active3 = e.index
				this.pages = 1;
				this.current = 0;
				this.productList = [];
			}
		},
		onShow: function() {
			// 页面显示
			let that = this;

			// #ifdef MP-WEIXIN
			util.request('index/getTemplateId', {
				templateTypes: '4,5'
			}).then(res => {
				if (res.code === 0) {
					that.tmplIds = res.data
				}
			});
			// #endif
		},
		onLoad: function() {
			this.getIndexData()
			// #ifdef MP-WEIXIN
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			var that = this
			// if (!uni.getStorageSync('token')) {
				uni.login({
					success: function(res) {
						if (res.code) {
							// util.requestlogin('auth/' + res.code).then(res => {
							util.requestlogin('repairauth/' + res.code).then(res => {
								if (res.code === 0) {
									//存储用户信息
									uni.setStorageSync('userInfo', res.userInfo);
									uni.setStorageSync('token', res.token);
									uni.setStorageSync('userId', res.userId);
									that.userId = res.userId
								} else {
								
									// util.toast(res.msg)
									// uni.clearStorageSync('userInfo');
									// uni.clearStorageSync('token');
									// uni.clearStorageSync('userId');
								}
							});
						}
					}
				});
			// }
			// #endif
			
			// wx.startLocationUpdateBackground({
			//   success: (res) => {
			// 	wx.onLocationChange((_res) => {
			// 	  console.log('定位发生改变', _res)
			// 	})
			//   }
			// })
			// startLocationUpdateBackground
			//开启后台定位
			// uni.startLocationUpdateBackground({
			// 	success: (res) => {
			// 	  uni.onLocationChange((res) => {
			// 		console.log("纬度：" + res.latitude);
			// 		console.log("经度：" + res.longitude);
			// 	  });
			// 	},
			// 	fail: (err) => console.error("后台运行定位消息失败：", err),
			// 	complete: (msg) => console.log("后台运行定位消息 API 完成"),
			// 	interval: 100, // 可选，位置更新的时间间隔，单位毫秒，默认为系统默认值
			// });
			
			// uni.startLocationUpdate({
			//   success: res => console.log('开启应用接收位置消息成功'),
			//   fail: err => console.error('开启应用接收位置消息失败：', err),
			//   complete: msg => console.log('调用开启应用接收位置消息 API 完成')
			// });

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.current = 1;
			this.pages = 1;
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			this.getIndexData();
			// 隐藏导航栏加载框
			uni.hideNavigationBarLoading();
			// 停止下拉动作
			uni.stopPullDownRefresh();
		},
		//上拉加载
		onReachBottom() {
			var that = this;
			//that.limit = that.limit + 10;
			let index_ = that.tabIndex;
			that.current = that.current + 1;
			var that = this;
			if (that.current <= that.pages) {
				that.getIsCategoryList();
			}
		},

		onShareTimeline: function() {
			return {
				title: app.globalData.projectName,
				path: '/pages/index/index'
			}
		},
		onShareAppMessage: function() {
			return {
				title: app.globalData.projectName,
				path: '/pages/index/index'
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.bg-set-new {
		color: white;
		background: #2B7FF0;
	}

	.tui-header {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		z-index: 999;
	}

	.tui-rolling-search {
		width: 100%;
		height: 60rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-category {
		font-size: 24rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 0;
		margin-right: 22rpx;
		flex-shrink: 0;
	}

	.tui-category-scale {
		transform: scale(0.7);
		line-height: 24rpx;
	}

	.tui-icon-category {
		line-height: 20px !important;
		margin-bottom: 0 !important;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		font-size: 22rpx;
		line-height: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-header-banner {
		//padding-top: 100rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #2B7FF0 10%, #fff 100%);
	}

	.tui-hot-search {
		color: #206564;
		font-size: 18rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
		// margin-left: 13px;
	}

	.tui-hot-tag {
		font-size: 18rpx;
		//background-color: rgba(255, 255, 255, 0.15);
		background-color: #fff;
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 24rpx;
		margin-right: 10px;
	}

	.tui-banner-bg {
		display: flex;
		height: 340rpx;
		/* #ifdef H5 */
		height: 380rpx;
		/* #endif */
		position: relative;
		margin-top: 10px;
	}

	.tui-primary-bg {
		width: 50%;
		display: inline-block;
		height: 224rpx;
		border: 1px solid transparent;
		position: relative;
		z-index: 1;
		background-color: #2B7FF0;
	}

	.tui-route-left {
		transform: skewY(8deg);
	}

	.tui-route-right {
		transform: skewY(-8deg);
	}

	.tui-banner-box {
		width: 100%;
		//padding: 0 20rpx;
		padding: 0rpx;
		box-sizing: border-box;
		position: absolute;
		/* overflow: hidden; */
		z-index: 99;
		bottom: -80;
		left: 0;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 400rpx;
		/* #ifdef H5 */
		height: 440rpx;
		/* #endif */
		// border-radius: 12rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.tui-slide-image {
		width: 100%;
		height: 400rpx;
		display: block;
	}

	/* #ifdef MP-WEIXIN */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background-color: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	/* 秒杀专区 */
	.seckill-section {
		margin-top: 10rpx;
		background: #fff;
	}

	.f-background {
		background: #DAEBFF;
	}

	.seckill-section .s-header {
		background: #DAEBFF;
		display: flex;
		align-items: center;
		height: 150rpx;
		line-height: 1;
	}

	.seckill-section .s-header .s-img {
		width: 120rpx;
		height: 30rpx;
		border-width: 5px;
		border-style: solid;
		border-radius: 50%;
		border-color: #fff;
		margin-left: 8px;
	}

	.seckill-section .s-header .tip {
		font-size: 20rpx;
		line-height: 5rpx;
		color: $color-default;
		border: 1rpx solid $color-default;
		border-radius: 30rpx;
		padding: 15rpx;
	}

	.seckill-section .s-header .tip2 {
		font-size: 30rpx;
		line-height: 15rpx;
		color: #fff;
		border: 1rpx solid #F8A1B3;
		border-radius: 10rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.seckill-section .floor-list {
		white-space: nowrap;
	}

	.seckill-section .scoll-wrapper {
		display: flex;
		align-items: flex-start;
	}

	.seckill-section .floor-item {
		width: 250rpx;
		margin-right: 20rpx;
		font-size: 22rpx;
		color: #303133;
		line-height: 1.8;
	}

	.seckill-section .floor-item image {
		width: 250rpx;
		height: 250rpx;
		border-radius: 30rpx;
	}

	.seckill-section .floor-item .price {
		font-size: 30rpx;
		font-weight: 600;
	}

	.seckill-section .more {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
		width: 250rpx;
		height: 250rpx;
		border-radius: 30rpx;
		background: #f3f3f3;
		font-size: 24rpx;
		color: #909399;
	}

	.clamp {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	.floor-item image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 30rpx;
	}

	.line-through {
		display: inline;
		color: rgb(153, 153, 153);
		font-size: 23rpx;
		text-decoration: line-through;
	}

	.more {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
		width: 180rpx;
		height: 180rpx;
		border-radius: 6rpx;
		background: #f3f3f3;
		font-size: 24rpx;
		color: #909399;
	}


	/* 通知楼层 */
	.tui-notice-board {
		width: 100%;
		box-sizing: border-box;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		top: 0;
		z-index: 999;
	}

	.tui-icon-bg {
		position: relative;
		z-index: 10;
	}

	.tui-rolling-icon {
		margin-right: 12rpx;
	}

	.tui-scorll-view {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		color: $color-default;
	}

	.tui-notice {
		transform: translateX(100%);
	}

	.tui-animation {
		-webkit-animation: tui-rolling 12s linear infinite;
		animation: tui-rolling 12s linear infinite;
	}

	@-webkit-keyframes tui-rolling {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-170%);
		}
	}

	@keyframes tui-rolling {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-170%);
		}
	}

	.tui-product-category {
		background-color: #fff;
		padding: 6rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #555;
	}

	.tui-category-item {
		width: 20%;
		height: 118rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-top: 15rpx;
	}

	.tui-category-img {
		height: 80rpx;
		width: 80rpx;
		display: block;
	}

	.tui-category-name {
		line-height: 22rpx;
		font-size: 22rpx;
	}

	.tui-product-box {
		margin: 10rpx 10rpx 0 10rpx;
		padding: 0 15rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
	}

	.tui-block__box {
		padding: 0 25rpx 25rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.tui-pb-10 {
		padding-bottom: 10rpx;
	}

	.tui-bg-white {
		background-color: #fff;
	}

	.tui-group-name {
		width: 100%;
		font-size: 34rpx;
		line-height: 34rpx;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333;
	}

	.tui-sub__desc {
		font-size: 22rpx;
		font-weight: 400;
		padding-left: 25rpx;
	}

	.tui-goods__list {
		display: flex;
		align-items: center;
	}

	.tui-goods__item {
		background-color: #fff;
		width: 220rpx;
		height: 220rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
		margin-right: 18rpx;
	}

	.tui-goods__imgbox {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.tui-goods__img {
		max-width: 150rpx;
		max-height: 150rpx;
		display: block;
	}

	.tui-pri__box {
		max-width: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tui-sale-pri {
		display: flex;
		align-items: flex-end;
		padding: 10rpx 0 8rpx;
		box-sizing: border-box;
		line-height: 28rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tui-size-sm {
		font-size: 26rpx;
		line-height: 26rpx;
		transform: scale(0.8);
		transform-origin: 0 50%;
	}

	/*秒杀商品*/
	.tui-more__box {
		display: flex;
		align-items: center;
		font-weight: 400;
		color: #999;
	}

	.tui-more__box text {
		font-size: 22rpx;
		line-height: 22rpx;
	}

	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tui-new-item {
		width: 49%;
		height: 160rpx;
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12rpx;
	}

	.tui-new-mtop {
		margin-top: 2%;
	}

	.tui-title-box {
		font-size: 22rpx;
	}

	.tui-new-title {
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-new-price {
		padding-top: 18rpx;
	}

	.tui-new-img {
		padding-right: 10rpx;
		width: 130rpx;
		height: 130rpx;
		display: block;
		flex-shrink: 0;
		border-radius: 30rpx;
	}

	.tui-new-label {
		width: 56rpx;
		height: 56rpx;
		border-top-left-radius: 12rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.b .item {
		border-radius: 30rpx;
		height: 274rpx;
		margin: 20rpx;
	}

	.b .img {
		margin-top: 12rpx;
		margin-right: 12rpx;
		float: left;
		width: 220rpx;
		height: 220rpx;
		border-radius: 30rpx;
	}

	.b .right {
		float: left;
		height: 244rpx;
		width: 380rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.b .text {
		margin: 10rpx;
		font-size: 20rpx;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		height: 244rpx;
	}

	.b .name {
		font-size: 30rpx;
		display: block;
		color: #333;
	}

	.b .price {
		display: block;
		line-height: 50rpx;
		font-size: 38rpx;
		font-weight: 600;
	}

	.notice-title {
		text-align: center;
		font-weight: bolder;
		padding-bottom: 30rpx
	}

	.me-tabs-box {
		z-index: 99;
		// 		position: fixed;
		// top:190upx;
		// height: 100rpx;
	}

	//注释：样式
	.floor_title {
		display: flex;
		flex-direction: column;

	}

	.floor_title image {
		height: 60rpx;
		width: 100%;
	}

	.floor_product {
		display: flex;
		padding: 10rpx;
	}

	.right-img-box {
		justify-content: space-around;
		display: flex;
		flex-wrap: wrap;

	}

	.margin-bottom10 {
		margin-bottom: 10px;
	}

	.margin-bottom0 {
		margin-bottom: 0px;
		background-color: red;
	}

	.gongzhonghao {
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		flex: 5;
		padding: 5px;
		background: #D7E8DD;
		margin-left: 5px;
		margin-right: 5px;
	}
	.gzh_colum {
		border-radius: 15rpx;
		display:flex;
		flex-direction: row;
		margin-left: 5px; 
		background:-webkit-linear-gradient(top,white,#D7E8DD,rgb(208, 231, 229)); 
		margin-right: 5px;padding: 5px;flex: 5; 
		align-items: center;
	}
	.tui-grid-icon {
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
		text-align: center;
		vertical-align: middle;
	}
	
	.tui-grid-label {
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 10rpx;
	}
</style>